<template>
  <div
    class="canvas-box"
    :style="`width:${width}px;height:${height}px;
    transform: translate(${x}px, ${y}px) scale(${scaleVal});
     transform-origin:0 0;`"
  >
    <vue-draggable-resizable
      :x="0"
      :y="0"
      :w="width"
      :h="height"
      :handles="[]"
      :resizable="false"
      :draggable="draggable"
      :parent="false"
      :active="isDragging"
      @dragging="onDrag"
      style="transform: translate(0, 0)"
    >
      <div class="canvas-content">
        <!-- 画布内容 -->
        <slot />
      </div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
  components: {
    VueDraggableResizable,
  },
  props: {
    w: {
      type: Number,
      default: 0,
    },
    h: {
      type: Number,
      default: 0,
    },
    defaultTop: {
      type: Number,
      default: 0,
    },
    scaleSize: {
      type: Number,
      default: 1,
    },
    minScale: {
      type: Number,
      default: 0.4,
    },
    maxScale: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      x: 0,
      y: this.defaultTop > 0 ? this.defaultTop : 0,
      width: this.w,
      height: this.h,
      isDragging: false,
      isSpacePressed: false,
      draggable: false,
      scaleVal: this.scaleSize,
    };
  },

  watch: {
    scaleSize(val) {
      this.scaleVal = val;
    },
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown);
    window.addEventListener('keyup', this.handleKeyUp);
    window.addEventListener('mousemove', this.handleMouseMove);
    window.addEventListener('mousewheel', this.handleMouseWheel);
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown);
    window.removeEventListener('keyup', this.handleKeyUp);
    window.removeEventListener('mousemove', this.handleMouseMove);
    window.removeEventListener('mousewheel', this.handleMouseWheel);
  },
  methods: {
    updateDragging() {
      this.$emit('updateDragging', this.isDragging);
    },
    onDrag(x, y) {
      this.x = x;
      this.y = y;
    },
    handleKeyDown(event) {
      if (event.keyCode === 32) {
        this.isSpacePressed = true;
        this.isDragging = true;
      } else if (event.keyCode === 46) {
        this.$emit('keyCodeDelete');
      }
    },
    handleKeyUp(event) {
      if (event.keyCode === 32) {
        this.isSpacePressed = false;
        this.isDragging = false;
        this.draggable = false;
        this.updateDragging();
      }
    },
    handleMouseMove(event) {
      if (this.isSpacePressed) {
        // 处理拖动逻辑
        this.isDragging = true;
        this.draggable = true;
        this.updateDragging();
      }
    },
    handleMouseWheel(event) {
      if (this.isSpacePressed) {
        if (event.deltaY < 0) {
          // 向上滚动，放大画布
          if (this.scaleVal >= this.maxScale) return;
          this.scaleVal += 0.1;
        } else {
          // 向下滚动，缩小画布
          if (this.scaleVal <= this.minScale) return;
          this.scaleVal -= 0.1;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
.canvas-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.canvas-content {
  width: 100%;
  height: 100%;
  // background-color: #f0f0f0;
}
::v-deep .vdr {
  border: none;
}
</style>
<style scoped>
/* 滚动条样式重置 */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  background-color: #dcdcdc;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-corner {
  background: white;
  display: none;
}
</style>
